<template>
  <div class="Material">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="tltle_box">
            <el-row :gutter="24" style="width: 100%;">
              <el-col :sm="24" :md="12" :lg="12">
                <div class="tltle_box_l">
                  <div class="l_select">
                    <el-select
                      v-model="ChangeText"
                      clearable
                      placeholder="全部素材"
                      @change="ChangeTextvalue"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                  <div class="Material_r">
                    <el-input
                      placeholder="请输入关键字"
                      v-model="inputText"
                      @clear="ClickInputText"
                      clearable
                    ></el-input>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="ClickInputText"
                      >搜索</el-button
                    >
                  </div>
                </div>
              </el-col>
              <el-col :sm="24" :md="12" :lg="12">
                <div class="tltle_box_r">

                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="新建文件夹"
                    placement="top"
                  > -->
                    <el-button
                      @click="NewFolder = true"
                      v-if="Invoking.forFunctionCode('ftp:createFolder')"
                    >
                      <img src="../../assets/images/icon1_03.png" alt />
                         <div>新建文件夹</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="添加素材"
                    placement="top"
                  > -->
                    <el-button
                      @click="addinformation"
                      v-if="Invoking.forFunctionCode('ftp:uploadMaterial3')"
                    >
                      <img src="../../assets/images/icon3_03.png" alt />
                      <div>添加素材</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除素材"
                    placement="top"
                  > -->
                    <el-button
                      @click="clickRrmoveList"
                      v-if="Invoking.forFunctionCode('material:updateIsDelete')"
                    >
                      <img src="../../assets/images/icon4_03.png" alt />
                          <div>删除素材</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                  <!-- <el-tooltip
                    class="item"
                    effect="dark"
                    content="快捷制作节目"
                    placement="top"
                  > -->
                    <el-button
                      @click="isMaterialIds"
                      v-if="
                        Invoking.forFunctionCode('program:oneKeyMakeProgram')
                      "
                    >
                      <img src="../../assets/images/icon5_03.png" alt />
                      <div>节目快制</div>
                    </el-button>
                  <!-- </el-tooltip> -->
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div
          class="grid-content bg-purple-dark"
          style="
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #fff;
          "
        >
          <MaterialTable
            ref="loadMaterialList"
            v-bind:TransferInputText="TransferInputText"
            v-bind:TransferChangeText="TransferChangeText"
            v-bind:refreshTable="refreshTable"
            @transferId="transferId"
            @InformationId="InformationId"
            @removeMaterial="removeMaterial"
            @dataRefresh="dataRefresh"
          ></MaterialTable>
        </div>
      </el-col>
    </el-row>
    <Popout
      v-bind:dialogVisible="dialogVisible"
      v-bind:addVisible="addVisible"
      v-bind:materialId="materialId"
      @succeedUrl="succeedUrl"
      @submintList="submintList"
    ></Popout>
    <Establish></Establish>
    <!-- <Naming></Naming> -->
    <!-- 新建文件夹 -->
    <el-dialog
      title="新建文件夹"
      :visible.sync="NewFolder"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
      @close="cancelNewFolder"
    >
      <div class="dialog-body">
        <div class="line">
          <el-form ref="form" :model="addNewFolder" label-width="100px">
            <el-form-item label="文件夹名称">
              <el-input v-model="addNewFolder.folderName"></el-input>
            </el-form-item>
          </el-form>
          <span
            style="
              width: 100%;
              text-align: center;
              margin: 0 auto;
              height: 50px;
              display: block;
            "
            class="button_dialog"
          >
            <el-button
              @click="submitNewFolder"
              style="background-color: #4d9ce0; color: #fff"
              >确 定</el-button
            >
            <el-button @click="cancelNewFolder">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 制作节目 -->
    <el-dialog
      class="addProgramForm"
      :title="
        programTitle ? '快捷制作节目【' + programTitle + '】' : '快捷制作节目'
      "
      :visible.sync="adddialogVisible"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
      @close="cancelMakeProg"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="addDialogForm">
            <el-form
              ref="form"
              :model="addProgramForm"
              label-width="100px"
              style="margin-top: 10px"
            >
              <el-form-item label="节目名称">
                <el-input
                  v-model="addProgramForm.programName"
                  @input="blurProgramName"
                  placeholder="请输入节目名称"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="屏属性设置" style="position: relative">
                <el-select
                  v-model="addProgramForm.regionSize"
                  placeholder="请选择尺寸"
                  style="width: 55%"
                  clearable
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in acrossVertical"
                    :key="index"
                  ></el-option>
                </el-select>
                <div class="ifpass">
                  <div
                    :class="addProgramForm.isPass == false ? '' : 'addClass'"
                    style="
                      color: #4d9ce0;
                      height: 39px;
                      box-sizing: border-box;
                      float: left;
                      width: 50%;
                      background-color: #f2faff;
                      border: 1px solid #4d9ce0;
                    "
                    @click="isPatternClick"
                  >
                    横屏
                  </div>
                  <div
                    :class="addProgramForm.isPass == true ? '' : 'addClass'"
                    style="
                      color: #4d9ce0;
                      height: 39px;
                      box-sizing: border-box;
                      float: left;
                      width: 50%;
                      background-color: #f2faff;
                      border: 1px solid #4d9ce0;
                    "
                    @click="isPatternClick"
                  >
                    竖屏
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="formButton">
                <el-button
                  style="background-color: #4d9ce0; color: #fff"
                  @click="subminMake"
                  >确定</el-button
                >
                <el-button
                  style="background-color: #fff; color: #333"
                  @click="cancelMakeProg"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
            <div class="attention">
              <div class="attention_text">注意</div>
              <P>
                一键生成的节目都是全屏模式，只针对图片与视频素材并且是审核通过的，只选一
                个素材时播放时长可调整，选择多个素材时，图片素材默认都为10s，视频素材为
                视频本身时长。
              </P>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 素材信息 -->
    <el-dialog
      title="素材信息"
      :visible.sync="IsShowPage"
      :width="this.$store.getters.offsetWidth"
      class="materialMessage"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="repetition_text" v-if="ifError">此素材名已重复</div>
          <el-form ref="form" :model="addformList" label-width="100px">
            <el-form-item label="素材名称">
              <el-input
                v-model="addformList.name"
                style="float: left; width: 90%"
                @input="inputVerification"
              ></el-input>
              <a
                :href="
                  this.$http.defaults.baseURL +
                  'ftp/downloadMaterial?materialId=' +
                  materialId
                "
                :download="addformList.name"
                v-if="
                  addformList.type !== 0 && addformList.type !== 4 && addformList.type !== 5 &&
                  Invoking.forFunctionCode('ftp:downloadMaterial')
                "
              >
                <i class="el-icon-download materialMessage_icon"></i>
              </a>
              <!-- @click="download" -->
            </el-form-item>
            <div v-if="addformList.type !== 0">
              <el-form-item label="直播源" v-if="addformList.type == 5">
                <el-input v-model="addformList.liveUrl"></el-input>
              </el-form-item>
              <el-form-item label="网址" v-else-if="addformList.type == 4">
                <el-input v-model="addformList.website"></el-input>
              </el-form-item>
              <el-form-item label="审核状态" style="position: relative">
                <el-input
                  v-model="addformList.auditStatus"
                  :style="
                    addformList.auditStatus == '未审核' ? 'width:55%' : 'width: 90%'
                  "
                  disabled
                ></el-input>
                <i class="el-icon-success" title="智能审核提醒您素材内容合格通过" v-if="addformList.aiAudit == 'normal'" style="text-align: center;line-height: 40px;cursor: pointer;width: 30px;color: #4d9ce0;"></i>
                <i class="el-icon-error" :title="'智能审核提醒您素材内容结果：'+ zycmUtils.convertAiAuditLabel(addformList.aiAudit)" v-if="addformList.aiAudit != 'normal' && addformList.aiAudit != null" style="text-align: center;line-height: 40px;cursor: pointer;width: 30px;color: red;"></i>
                <div
                  class="ifpass"
                  v-if="
                    addformList.auditStatus == '未审核' &&
                    Invoking.forFunctionCode('material:updateAuditStatus')
                  "
                >
                  <!-- v-if="!ifbutton" -->
                  <div
                    :class="addformList.isPass == false ? '' : 'addClass'"
                    style="
                      color: #4d9ce0;
                      height: 39px;
                      box-sizing: border-box;
                      float: left;
                      width: 50%;
                      background-color: #f2faff;
                      border: 1px solid #4d9ce0;
                    "
                    @click="isPassClick"
                  >
                    通过
                  </div>
                  <div
                    :class="addformList.isPass == true ? '' : 'addClass'"
                    style="
                      color: #4d9ce0;
                      height: 39px;
                      box-sizing: border-box;
                      float: left;
                      width: 50%;
                      background-color: #f2faff;
                      border: 1px solid #4d9ce0;
                    "
                    @click="isPassClick"
                  >
                    不通过
                  </div>
                </div>
              </el-form-item>
              <el-form-item
                label="审核意见"
                class="opinion"
                v-if="!addformList.isPass"
              >
                <!-- v-if="!isPass" -->
                <el-input
                  type="textarea"
                  v-model="addformList.infoText"
                  maxlength="100"
                  placeholder="请输入意见内容限100字"
                ></el-input>
              </el-form-item>
            </div>
            <el-form-item class="formButton">
              <el-button
                style="background-color: #4d9ce0; color: #fff"
                @click="ModifyTheMaterial"
                >确 定</el-button
              >
              <el-button @click="removeIsShowPage">关 闭</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 上传 -->
  </div>
</template>

<script>
import moment from "moment";
import MaterialTable from "../../components/MaterialData/MaterialTable.vue";
import Popout from "../../components/MaterialData/Popout.vue";
import Establish from "../../components/MaterialData/Establish.vue";
// import Naming from "../../components/MaterialData/Naming.vue";
export default {
  name: "Material",
  components: {
    MaterialTable,
    Popout,
    Establish,
    // Naming
  },
  props: {},
  data() {
    return {
      // 提交上传的id
      materialIdsList: [],
      // 详情
      addformList: {
        name: "",
        share: "",
        auditStatus: "",
        infoText: "",
        isPass: true,
        Tiemvalue: "",
        website: "",
        liveUrl: "",
        type: "",
        id: "",
        aiAudit:""
      },
      // 制作节目
      addProgramForm: {
        programName: "",
        isPass: true,
        regionSize: "",
      },
      adddialogVisible: false,
      NewFolder: false,
      dialogVisible: false,
      addVisible: false,
      IsShowPage: false,
      // 新建文件夹表单
      addNewFolder: {
        folderName: "",
      },
      options: [
        {
          value: "1",
          label: "图片素材",
        },
        {
          value: "2",
          label: "视频素材",
        },
        {
          value: "3",
          label: "文本素材",
        },
        {
          value: "4",
          label: "网址素材",
        },
        {
          value: "5",
          label: "直播源",
        },
        {
          value: "6",
          label: "升级包",
        },
      ],
      // 横屏
      across: [
        {
          value: "5000*5000",
          label: "5000*5000",
        },
        {
          value: "2000*2000",
          label: "2000*2000",
        },
        {
          value: "1920*1080",
          label: "1920*1080",
        },
        {
          value: "1694*544",
          label: "1694*544",
        },
        {
          value: "1920*900",
          label: "1920*900",
        },
        {
          value: "1366*726",
          label: "1366*726",
        },
        {
          value: "1600*900",
          label: "1600*900",
        },
        {
          value: "1400*900",
          label: "1400*900",
        },
        {
          value: "1366*768",
          label: "1366*768",
        },
        {
          value: "1280*1024",
          label: "1280*1024",
        },
        {
          value: "1280*720",
          label: "1280*720",
        },
        {
          value: "1024*768",
          label: "1024*768",
        },
        {
          value: "800*600",
          label: "800*600",
        },
        {
          value: "720*360",
          label: "720*360",
        },
      ],
      // 竖屏
      vertical: [
        {
          value: "1080*1920",
          label: "1080*1920",
        },
        {
          value: "1050*1680",
          label: "1050*1680",
        },
        {
          value: "900*1400",
          label: "900*1400",
        },
        {
          value: "768*1024",
          label: "768*1024",
        },
        {
          value: "600*800",
          label: "600*800",
        },
        {
          value: "500*600",
          label: "500*600",
        },
        {
          value: "480*600",
          label: "480*600",
        },
        {
          value: "300*400",
          label: "300*400",
        },
        {
          value: "100*200",
          label: "100*200",
        },
      ],
      acrossVertical: [],
      inputText: "",
      ChangeText: "",
      TransferInputText: "",
      TransferChangeText: "",
      materialId: "",
      // 暂时数据
      forId: "",
      deleteList: [],
      isRemove: false,
      // 制作节目id
      fabrication: [],
      // 刷新
      refreshTable: false,
      ifError: false,
      Selectdata: [],
      programTitle: "",
      repetition: false,
    };
  },
  created() {
    window.sessionStorage.setItem("skipPath", "/");
    if (this.addProgramForm.isPass) {
      this.acrossVertical = this.across;
    } else {
      this.acrossVertical = this.vertical;
    }
  },
  methods: {
    // 验证重复名
    async blurProgramName(e) {
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("zycmToken", token);
      formData.append("programName", this.addProgramForm.programName);
      const { data: res } = await this.$http.post(
        "program/checkProgName",
        formData
      );
      if (res.data) {
        if (res.data[0]) {
          this.repetition = true;
          // if (e == "e") {
          //   this.addProgramForm.programName = "";
          // }
        } else {
          this.repetition = false;
        }
      } else {
        this.repetition = false;
      }
    },
    InformationId(val) {
      this.materialId = val.materialId;
      this.information(val);
    },
    // 验证修改后的名字合不合法
    async inputVerification(obj) {
      let sss = obj;
      let idss = this.deleteList.toString();
      const { data: res } = await this.$http.get("material/checkMaterialName", {
        params: {
          materialIds: this.materialId,
          materialNames: this.addformList.name,
        },
      });
      if (res.data.length > 0) {
        this.$message({
          type: "error",
          message: "已有此素材",
        });
        this.ifError = true;
      } else {
        this.ifError = false;
      }
    },
    // 上传后新建文件夹
    submintList(e) {
      this.materialIdsList = e;
      this.NewFolder = true;
    },
    succeedUrl(e) {
      this.refreshTable = !this.refreshTable;
    },
    // 提交修改表单
    async ModifyTheMaterial() {
      if (this.ifError) {
        this.$message({
          type: "error",
          message: "此素材名已重复",
        });
        return;
      }
      if (!this.addformList.name) {
        this.$message({
          type: "warning",
          message: "此素材名不能为空",
        });
        return;
      }
      if(this.addformList.name.length >= 104){
        this.$message.warning("素材名不能过长");
        return;
      }
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      if (this.addformList.website) {
        formData.append("sourceUrl", this.addformList.website);
      } else if (this.addformList.liveUrl) {
        formData.append("sourceUrl", this.addformList.liveUrl);
      }
      let auditStatus1 = "";
      if (
        !this.addformList.isPass ||
        this.addformList.auditStatus == "审核未通过"
      ) {
        auditStatus1 = 2;
      } else if (
        this.addformList.isPass ||
        this.addformList.auditStatus == "审核通过"
      ) {
        auditStatus1 = 1;
      } else {
        auditStatus1 = 0;
      }
      if (auditStatus1 == 2 && !this.addformList.infoText) {
        this.$message({
          type: "warning",
          message: "请说明未通过的原因",
        });
        return;
      }
      formData.append("zycmToken", token);
      formData.append("materialName", this.addformList.name);
      formData.append("auditStatus", auditStatus1);
      formData.append("auditRemark", this.addformList.infoText);
      formData.append("materialId", this.addformList.id);
      const { data: res } = await this.$http.post(
        "material/updateMaterial",
        formData
      );
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.IsShowPage = false;
      this.deleteList = [];
      this.refreshTable = !this.refreshTable;
    },
    // 获取详细
    async information(e) {
      //清理还原数据
      this.ifError = false;

      this.IsShowPage = true;
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("zycmToken", token);
      formData.append("materialId", e.materialId);
      const { data: res } = await this.$http.post(
        "material/selectByPrimaryKey",
        formData
      );
      if (res.result != "success") {
         this.$message({
          type: "error",
          message: res.message,
        });
        return;
      }
      this.addformList.Tiemvalue = this.$options.filters.dateFormat(
        res.data.uploadTime
      );
      this.addformList.name = res.data.materialName;
      if (res.data.type == 4) {
        this.addformList.website = res.data.sourceUrl;
      } else if (res.data.type == 5) {
        this.addformList.liveUrl = res.data.sourceUrl;
      }
      if (res.data.isPrivate == 1) {
        this.addformList.share = "共享";
      } else {
        this.addformList.share = "不共享";
      }
      if (res.data.auditStatus == 1) {
        this.addformList.auditStatus = "审核通过";
        this.addformList.isPass = true;
      } else if (res.data.auditStatus == 2) {
        this.addformList.auditStatus = "审核未通过";
        this.addformList.isPass = false;
      } else {
        this.addformList.auditStatus = "未审核";
        this.addformList.isPass = true;
      }
      this.addformList.infoText = res.data.auditRemark || "";
      this.addformList.type = res.data.type;
      this.addformList.id = res.data.materialId;
      this.addformList.aiAudit = res.data.aiAuditStatus;
    },
    // 关闭详情
    removeIsShowPage() {
      this.IsShowPage = false;
    },
    // 判断是否可以制作节目
    isMaterialIds() {
      if (this.fabrication.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择审核通过的图片或视频",
        });
        return;
      }
      if (this.deleteList.length !== this.fabrication.length) {
        this.$message({
          type: "warning",
          message: "请注意选中素材必须是图片或视频并且是审核通过的",
        });
        return;
      }
      if (this.Selectdata.length == 1) {
        this.addProgramForm.programName = this.Selectdata[0].materialName.split(
          "."
        )[0];
        this.blurProgramName("e");
        this.programTitle = this.addProgramForm.programName;
      } else {
        this.addProgramForm.programName = "";
        this.programTitle = "";
      }
      this.adddialogVisible = true;
    },
    // 提交制作节目
    async subminMake() {
      if (!this.addProgramForm.programName || !this.addProgramForm.regionSize) {
        this.$message({
          type: "warning",
          message: "请输入节目名和屏属性",
        });
        return;
      }
      if (this.repetition) {
        this.$message({
          type: "warning",
          message: "节目名重复",
        });
        return;
      }
      let screenType = "";
      if (this.addProgramForm.isPass) {
        screenType = 1;
      } else {
        screenType = 2;
      }

      var params = this.addProgramForm.regionSize.split("*");
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("programName", this.addProgramForm.programName);
      formData.append("width", params[0]);
      formData.append("height", params[1]);
      formData.append("screenType", screenType);
      formData.append("materialIds", this.fabrication);
      formData.append("zycmToken", token);
      const { data: res } = await this.$http.post(
        "program/oneKeyMakeProgram",
        formData
      );
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.fabrication = [];
      this.addProgramForm.programName = "";
      this.adddialogVisible = false;
      this.refreshTable = !this.refreshTable;
    },
    isPassClick(e) {
      this.addformList.isPass = !this.addformList.isPass;
    },
    // 切换点击
    isPatternClick() {
      this.addProgramForm.isPass = !this.addProgramForm.isPass;
      if (this.addProgramForm.isPass) {
        this.acrossVertical = this.across;
      } else {
        this.acrossVertical = this.vertical;
      }
      this.addProgramForm.regionSize = "";
    },
    cancelNewFolder() {
      this.addNewFolder.folderName = "";
      this.NewFolder = false;
      this.refreshTable = !this.refreshTable;
    },
    // 提交新建文件夹
    async submitNewFolder() {
      if (!this.addNewFolder.folderName) {
        this.$message({
          type: "warning",
          message: "请输入内容",
        });
        return;
      }
      let skipPath = window.sessionStorage.getItem("skipPath");
      var lengthNum = skipPath.split("/");
      if (lengthNum.length >= 7) {
        this.$message({
          type: "warning",
          message: "最多创建6级文件夹",
        });
        return;
      }
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");

      if (!skipPath) {
        skipPath = "/";
      } else {
        skipPath = skipPath.replace('"', "").replace('"', "");
      }
      formData.append("zycmToken", token);
      formData.append("folder", this.addNewFolder.folderName);
      formData.append("relativePath", skipPath);
      formData.append("materialIds", this.materialIdsList);
      const { data: res } = await this.$http.post("ftp/createFolder", formData);
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
        this.materialIdsList = "";
        this.NewFolder = false;
        this.addNewFolder.folderName = "";
        this.refreshTable = !this.refreshTable;
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
    },
    // 点击删除
    clickRrmoveList() {
      if (this.deleteList.length < 1) {
        this.$message({
          type: "warning",
          message: "请选择需要删除的数据",
        });
        return;
      }
      this.$confirm("是否确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteRemove();
          //this.deleteList = [];
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.deleteList = [];
          this.refreshTable = !this.refreshTable;
        });
    },
    async deleteRemove() {
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("materialIds", this.deleteList);
      formData.append("zycmToken", token);
      const { data: res } = await this.$http.post(
        "material/updateIsDelete",
        formData
      );
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
        this.deleteList = [];
        this.refreshTable = !this.refreshTable;
      } else {
        this.$message({
          type: "error",
          message: res.data[0],
        });
      }

      this.$refs.loadMaterialList.loadMaterialByCondition(
        this.inputText,
        this.ChangeText
      );
    },
    // 删除数据
    removeMaterial(data) {
      this.deleteList = [];
      this.fabrication = [];
      this.Selectdata = [];
      data.forEach((element) => {
        this.deleteList.push(element.materialId);
        if (
          (element.type == 1 && element.auditStatus == 1) ||
          (element.type == 2 && element.auditStatus == 1)
        ) {
          this.fabrication.push(element.materialId);
          this.Selectdata.push(element);
        }
      });
      this.deleteList = Array.from(new Set(this.deleteList));
      this.fabrication = Array.from(new Set(this.fabrication));
    },
    dataRefresh() {
      //素材列表有刷新时 把已选数据清空
      this.deleteList = [];
      this.fabrication = [];
    },
    transferId(data) {
      if (data) {
        this.forId = data;
      } else {
        this.forId = "";
      }
    },
    addinformation() {
      if (!this.addVisible) {
        this.addVisible = true;
      } else {
        this.addVisible = false;
      }
    },
    ClickInputText() {
      //this.TransferInputText = this.inputText;
      //this.$refs.loadMaterialList.$watch();
      this.$refs.loadMaterialList.loadMaterialByCondition(
        this.inputText,
        this.ChangeText
      );
    },
    ChangeTextvalue() {
      //this.TransferChangeText = this.ChangeText;
      this.$refs.loadMaterialList.loadMaterialByCondition(
        this.inputText,
        this.ChangeText
      );
    },
    cancelMakeProg() {
      //取消一键制作
      this.adddialogVisible = false;
      this.addProgramForm.programName = "";
      this.addProgramForm.regionSize = "";
      this.addProgramForm.isPass = true;
      this.acrossVertical = this.across;
    },
  },
};
</script>



<style lang="stylus" scoped>
/deep/.el-form-item__label{
    margin-top: 1px;
}
.addProgramForm /deep/.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 456px;
  display: inline-block;
}

.repetition_text {
  text-align: center;
  color: red;
  padding-bottom: 15px;
}

.materialMessage_icon {
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  float: right;
  width: 10%;
}

.formButton {
  /deep/.el-button {
    padding: 12px 40px;
    margin: 10px 5% 0;
  }
}

.ifpass {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  cursor: pointer;
  margin: 0 0 0 20px;
  text-align: center;
}

.addClass {
  background-color: #4d9ce0 !important;
  color: #fff !important;
}

.button_dialog {
  /deep/.el-button {
    padding: 12px 25px;
    margin: 0 5%;
  }
}

.Material {
  width: 100%;
  padding: 1.5% 0;


  .addDialogForm {
    .attention {
      .attention_text {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        padding: 10px 0;
        border-bottom: 1px solid #888;
      }
    }

    /deep/.el-button {
      padding: 12px 40px;
      margin: 10px 5% 0;
    }
  }

  .tltle_box {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    // height: 100px;
    width: 98%;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 5px;
   padding:1% ;
    .tltle_box_l {
      display: flex;
      padding:5px 0 0 0;
      .l_select {
        width: 150px;

        /deep/.el-select {
          width: 70%;
          padding: 0 20px;
        }
      }

      .Material_r {
        display: flex;

        /deep/.el-button {
          margin: 0 0 0 20px;
          height: 40px;
          background-color: #2183d8;
        }
      }
    }

    .tltle_box_r {
      width: 100%;
       display: flex;
       padding:5px 0 0 20px;
      .el-button {
        background-color: #f2faff;
        // width: 50px;
        height: 50px;
        border: none;
        margin-left: 0;
        margin: 0 5px;
        padding: 0 5px;
        font-size: 14px;
       transform:scale(0.875);
        border-radius: 5px;
        // color:#409EFF;
        img {
          width: 26px;
          height: 26px;
        }
      }

      /deep/.el-button:hover {
        background-color: #f2f2f2;
      }
    }
  }
}

/deep/.el-select-dropdown .el-popper {
  width: 80% !important;
}

/deep/.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  color: #ff6633;
  background-color: #f2faff;
}

/deep/.el-dialog__header {
  background-color: #efefef;
  padding: 0;
  line-height: 50px;
  padding-left: 20px;
  color: #333;
  font-size: 16px;
}

/deep/.el-input__inner, /deep/.el-textarea__inner {
  border-radius: 4px;
}
/deep/.el-dialog /deep/.el-input__inner, /deep/.el-dialog /deep/.el-textarea__inner {
  border-radius: 0;
}
/deep/.el-textarea__inner {
  height: 80px;
}

/deep/.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}

/deep/.el-dialog /deep/.el-form-item__label {
  background-color: #efefef;
  border-radius: 0;
  height: 40px;
  border: 1px solid #dcdfe6;
  border-right: none;
  box-sizing: border-box;
  text-align: center;
  padding-left: 10px;
}

.el-dialog .opinion {
  /deep/.el-form-item__label {
    height: 80px;
    line-height: 80px;
  }
}
</style>
